<template>
  <div :style="mergedBlockStyle">
    <div :style="mergedTitleStyle">
      <slot name="title"></slot>
    </div>
    <slot name="form" />
    <slot name="default" />
    <el-divider v-if="showDivider"></el-divider>
  </div>
</template>

<script>
export default {
  props: {
    blockStyle: {
      type: Object,
      default: () => ({}),
    },
    titleStyle: {
      type: Object,
      default: () => ({}),
    },
    showDivider: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    mergedBlockStyle() {
      return {
        margin: "0 2% 20px 2%",
        ...this.blockStyle,
      };
    },
    mergedTitleStyle() {
      return {
        fontSize: "16px",
        fontWeight: 700,
        padding: "10px 0 10px 10px",
        ...this.titleStyle,
      };
    },
  },
};
</script>

<style lang="scss" scoped></style>
